<!-- 退款申请单 -->
<template>
  <div class="app-container">
    <!-- 导航 -->
    <el-menu :default-active="activeIndex" class="mini-menu" mode="horizontal" @select="handleSelect">
      <el-menu-item index="1">我的申请</el-menu-item>
      <el-menu-item index="2">代办</el-menu-item>
      <el-menu-item index="3">已办</el-menu-item>
    </el-menu>
    <!-- 筛选 -->
    <div class="filter-container">
      <el-form :inline="true" :model="listQuery">
        <!-- 是否已认证 -->
        <el-form-item label="单据编号:">
          <el-input v-model="listQuery.code" clearable @keyup.enter.native="handleFilter"> </el-input>
        </el-form-item>
        <!-- 是否禁用 -->
        <el-form-item label="金额:">
          <el-input v-model="listQuery.code" clearable @keyup.enter.native="handleFilter" class="w100"> </el-input>--
          <el-input v-model="listQuery.code" clearable @keyup.enter.native="handleFilter" class="w100"> </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleFilter">查询</el-button>
        </el-form-item>
      </el-form>
      <div>
        <el-button-group>
          <el-button type="primary" @click="$router.push('/reimburse/priorApplication/unreturnCosts/0')"> 新增 </el-button>
          <el-button type="primary">编辑</el-button>
          <el-button type="primary">明细</el-button>
          <el-button type="danger">删除</el-button>
          <el-button type="primary">复制</el-button>
          <el-button type="primary">催办</el-button>
          <el-button type="primary">打印</el-button>
        </el-button-group>
      </div>
    </div>

    <!-- 表格 -->
    <el-table v-loading="listLoading" :data="tableData" border fit highlight-current-row size="mini">
      <el-table-column type="selection" width="45"> </el-table-column>
      <el-table-column label="#" type="index" width="50" />

      <el-table-column label="公司" prop="company" />
      <el-table-column label="单据编号" prop="code" width="160">
        <template slot-scope="{ row }"
          ><el-link type="primary" @click="$router.push('/reimburse/priorApplication/unreturnCosts/' + row.id)">{{ row.code }}</el-link></template
        >
      </el-table-column>
      <el-table-column label="申请人" prop="shortName" />
      <el-table-column label="代理人" prop="fullName" />
      <el-table-column label="部门" prop="aircrafts" />
      <el-table-column label="申请日期" prop="type" />
      <el-table-column label="演示内容" prop="createTime" />
      <el-table-column label="币种" prop="managers" />
      <el-table-column label="金额（原币）" prop="managers" />
      <el-table-column label="金额（本币）" prop="managers" />
      <el-table-column label="单据状态" prop="managers" />
      <el-table-column label="报销状态(?)" prop="managers" />
      <el-table-column label="目前审批人" prop="status">
        <template slot-scope="{ row }">{{ customerStatusKV[row.status] }}</template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="m-center">
      <pagination :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="fetchList" />
    </div>

    <el-dialog title="新增" :visible.sync="dialogVisible" width="500px">
      <basic-info />
    </el-dialog>
  </div>
</template>

<script>
import { fetchList, exportCustomer, modify, queryCompany } from '@/api/client'
import { downloadBlobFile } from '@/utils'
import { verifiedOptions, verifiedKV, verifiedKeyTag, customerStatusOptions, customerStatusKV, customerCategoryKV } from '@/utils/options'
import Pagination from '@/components/Pagination' // secondary package based on el-pagination

export default {
  name: 'ClientTable',
  components: { Pagination },
  filters: {},
  data() {
    return {
      tableData: [{ id: 10000, company: 'JBE', code: 'YW202109010006' }],
      total: 0,
      listQuery: {
        code: '',
        limit: 10,
        page: 1,
        companyId: '', // 认证状态(0:已认证 1:未认证)
        status: '' // 状态(0:启用 1:禁用)
      },
      verifiedOptions,
      verifiedKV,
      verifiedKeyTag,
      customerStatusOptions,
      customerStatusKV,
      customerCategoryKV,
      downloadLoading: false,
      timer: null,
      companyList: [],
      dialogVisible: false,
      activeIndex: '1',
      listLoading: false
    }
  },

  created() {
    // this.fetchList();
    // this.queryCompany();
  },
  methods: {
    // 得到列表
    async fetchList() {
      this.listLoading = true
      fetchList(this.listQuery).then((response) => {
        this.tableData = response.data.items
        this.total = response.data.total
        this.listLoading = false
      })
    },
    // 搜索
    handleFilter() {
      this.listQuery.page = 1
      this.fetchList()
    },

    queryCompany() {
      queryCompany({}).then((res) => {
        this.companyList = res.data
      })
    },
    // 导航
    handleSelect(key, keyPath) {
      console.log(key, keyPath)
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  padding-top: 1px;
}
.mini-menu {
  // height: 50px;
  margin-bottom: 10px;
}
</style>
